{% extends "base.html" %}

{% set current_menu = 'work_hour' %}
{% set current_page = 'work_hour_dashboard' %}

{% block content %}
<div class="container mx-auto">
    <!-- 面包屑导航 -->
    <nav class="text-sm breadcrumbs mb-6">
        <ol class="flex items-center space-x-2">
            <li><a href="{{ url_for('main.home') }}" class="text-gray-500 hover:text-gray-700">首页</a></li>
            <li><i class="fas fa-chevron-right text-gray-400 text-xs mx-2"></i></li>
            <li><a href="{{ url_for('work_hour.stats') }}" class="text-gray-500 hover:text-gray-700">工时统计</a></li>
            <li><i class="fas fa-chevron-right text-gray-400 text-xs mx-2"></i></li>
            <li class="text-gray-700">工时数据看板</li>
        </ol>
    </nav>

    <!-- 看板统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <div class="bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg shadow-md p-6 text-black">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-black text-sm font-medium">总工时</p>
                    <p class="text-3xl font-bold text-black">{{ total_work_hours|round(1) }}</p>
                    <p class="text-black text-xs mt-1">小时</p>
                </div>
                <div class="bg-blue-400 bg-opacity-30 rounded-full p-3">
                    <i class="fas fa-clock text-2xl text-black"></i>
                </div>
            </div>
        </div>
        
        <div class="bg-gradient-to-r from-green-500 to-green-600 rounded-lg shadow-md p-6 text-black">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-black text-sm font-medium">活跃项目</p>
                    <p class="text-3xl font-bold text-black">{{ active_projects|length }}</p>
                    <p class="text-black text-xs mt-1">个项目</p>
                </div>
                <div class="bg-green-400 bg-opacity-30 rounded-full p-3">
                    <i class="fas fa-project-diagram text-2xl text-black"></i>
                </div>
            </div>
        </div>
        
        <div class="bg-gradient-to-r from-purple-500 to-purple-600 rounded-lg shadow-md p-6 text-black">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-black text-sm font-medium">参与人员</p>
                    <p class="text-3xl font-bold text-black">{{ active_users|length }}</p>
                    <p class="text-black text-xs mt-1">位成员</p>
                </div>
                <div class="bg-purple-400 bg-opacity-30 rounded-full p-3">
                    <i class="fas fa-users text-2xl text-black"></i>
                </div>
            </div>
        </div>
        
        <div class="bg-gradient-to-r from-orange-500 to-orange-600 rounded-lg shadow-md p-6 text-black">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-black text-sm font-medium">平均工时</p>
                    <p class="text-3xl font-bold text-black">{{ avg_work_hours|round(1) }}</p>
                    <p class="text-black text-xs mt-1">小时/人</p>
                </div>
                <div class="bg-orange-400 bg-opacity-30 rounded-full p-3">
                    <i class="fas fa-chart-line text-2xl text-black"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- 图表展示区域 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        <!-- 项目工时分布饼图 -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">项目工时分布</h3>
            <div id="project-hours-chart" style="height: 350px;"></div>
        </div>
        
        <!-- 人员工时使用排行柱状图 -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">人员工时排行</h3>
            <div id="user-hours-chart" style="height: 350px;"></div>
        </div>
    </div>
    
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        <!-- 月度工时趋势折线图 -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">月度工时趋势</h3>
            <div id="monthly-trend-chart" style="height: 350px;"></div>
        </div>
        
        <!-- 任务状态工时分布 -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">任务状态工时分布</h3>
            <div id="task-status-chart" style="height: 350px;"></div>
        </div>
    </div>
    
    <!-- 详细数据表格 -->
    <div class="bg-white rounded-lg shadow-md p-6">
        <h3 class="text-lg font-medium text-gray-900 mb-4">项目工时详情</h3>
        <div id="project-details-chart" style="height: 400px;"></div>
    </div>

    <!-- 报表预览区域 -->
    {% if report_data %}
    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-medium text-gray-900">报表预览</h3>
            <div class="flex space-x-2">
                <button id="export-excel-btn" class="text-sm bg-green-600 text-white py-1 px-3 rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2">
                    <i class="fas fa-file-excel mr-1"></i>导出Excel
                </button>
                <button id="export-pdf-btn" class="text-sm bg-red-600 text-white py-1 px-3 rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">
                    <i class="fas fa-file-pdf mr-1"></i>导出PDF
                </button>
            </div>
        </div>
        
        <!-- 报表标题和基本信息 -->
        <div class="mb-6 text-center">
            <h2 class="text-2xl font-bold text-gray-900">{{ report_title }}</h2>
            <p class="text-gray-600 mt-2">统计期间: {{ start_date }} 至 {{ end_date }}</p>
            <p class="text-gray-600">生成时间: {{ current_time }}</p>
        </div>
        
        <!-- 报表内容 -->
        <div id="report-content">
            {% if report_type == 'project' %}
            <!-- 项目工时报表 -->
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">项目名称</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">项目经理</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">总工时</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">总成本</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">任务数</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">完成率</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for project in report_data %}
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">{{ project.name }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-900">{{ project.manager_name }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ project.total_hours }}h</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">¥{{ project.total_cost }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ project.task_count }}</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="w-full bg-gray-200 rounded-full h-2.5">
                                    <div class="bg-blue-600 h-2.5 rounded-full" style="width: {{ project.completion_rate }}%"></div>
                                </div>
                                <div class="text-xs text-gray-500 mt-1">{{ project.completion_rate }}%</div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                    <tfoot class="bg-gray-50">
                        <tr>
                            <td class="px-6 py-3 text-sm font-medium text-gray-900">总计</td>

                            <td class="px-6 py-3 text-sm font-medium text-gray-900">{{ report_summary.total_hours }}h</td>
                            <td class="px-6 py-3 text-sm font-medium text-gray-900">¥{{ report_summary.total_cost }}</td>
                            <td class="px-6 py-3 text-sm font-medium text-gray-900">{{ report_summary.total_tasks }}</td>
                            <td class="px-6 py-3 text-sm font-medium text-gray-900">-</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            
            {% elif report_type == 'user' %}
            <!-- 人员工时报表 -->
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">姓名</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">部门</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">总工时</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">任务数</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">项目数</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">平均工时/天</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for user in report_data %}
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">{{ user.name }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-900">{{ user.department }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ user.total_hours }}h</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ user.task_count }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ user.project_count }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ user.avg_hours_per_day }}h</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                    <tfoot class="bg-gray-50">
                        <tr>
                            <td class="px-6 py-3 text-sm font-medium text-gray-900">总计</td>
                            <td class="px-6 py-3 text-sm font-medium text-gray-900">-</td>
                            <td class="px-6 py-3 text-sm font-medium text-gray-900">{{ report_summary.total_hours }}h</td>
                            <td class="px-6 py-3 text-sm font-medium text-gray-900">{{ report_summary.total_tasks }}</td>
                            <td class="px-6 py-3 text-sm font-medium text-gray-900">-</td>
                            <td class="px-6 py-3 text-sm font-medium text-gray-900">-</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            
            {% elif report_type == 'task' %}
            <!-- 任务工时报表 -->
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">任务名称</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">项目</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">负责人</th>

                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">开始时间</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">结束时间</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">计划工时</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">实际工时</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">偏差率</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for task in report_data %}
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">{{ task.name }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-900">{{ task.project_name }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-900">{{ task.assignee_name }}</div>
                            </td>

                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {% if task.start_time %}
                                            {{ task.start_time }}
                                        {% else %}
                                            -
                                        {% endif %}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {% if task.end_time %}
                                            {{ task.end_time }}
                                        {% else %}
                                            -
                                        {% endif %}
                                    </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ task.hours }}h</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                {% set deviation_rate = task.deviation_rate or 0 %}
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                                    {% if deviation_rate > 20 %}
                                        bg-red-100 text-red-800
                                    {% elif deviation_rate > 10 %}
                                        bg-yellow-100 text-yellow-800
                                    {% else %}
                                        bg-green-100 text-green-800
                                    {% endif %}">
                                    {{ "%.1f"|format(deviation_rate) }}%
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                                    {% if task.status == '已完成' %}
                                        bg-green-100 text-green-800
                                    {% elif task.status == '进行中' %}
                                        bg-blue-100 text-blue-800
                                    {% else %}
                                        bg-gray-100 text-gray-800
                                    {% endif %}">
                                    {{ task.status }}
                                </span>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                    <tfoot class="bg-gray-50">
                        <tr>
                            <td class="px-6 py-3 text-sm font-medium text-gray-900">总计</td>
                            <td class="px-6 py-3 text-sm font-medium text-gray-900">-</td>
                            <td class="px-6 py-3 text-sm font-medium text-gray-900">-</td>
                            <td class="px-6 py-3 text-sm font-medium text-gray-900">-</td>
                            <td class="px-6 py-3 text-sm font-medium text-gray-900">-</td>
                            <td class="px-6 py-3 text-sm font-medium text-gray-900">{{ report_summary.total_hours }}h</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            
            {% elif report_type == 'summary' %}
            <!-- 工时汇总报表 -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div class="bg-gray-50 p-4 rounded-lg">
                    <h4 class="text-md font-medium text-gray-900 mb-3">工时分布</h4>
                    <div id="summary-chart" style="height: 300px;"></div>
                </div>
                <div class="bg-gray-50 p-4 rounded-lg">
                    <h4 class="text-md font-medium text-gray-900 mb-3">项目工时排名</h4>
                    <div id="project-ranking-chart" style="height: 300px;"></div>
                </div>
            </div>
            
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">统计项</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数值</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">占比</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">总工时</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ report_summary.total_hours }}h</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="w-full bg-gray-200 rounded-full h-2.5">
                                    <div class="bg-blue-600 h-2.5 rounded-full" style="width: 100%"></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">计划工时</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ report_summary.total_estimated_hours }}h</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="w-full bg-gray-200 rounded-full h-2.5">
                                    <div class="bg-green-600 h-2.5 rounded-full" style="width: {{ (report_summary.total_estimated_hours / report_summary.total_hours * 100)|round(1) if report_summary.total_hours > 0 else 0 }}%"></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">实际工时</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ report_summary.total_actual_hours }}h</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="w-full bg-gray-200 rounded-full h-2.5">
                                    <div class="bg-yellow-600 h-2.5 rounded-full" style="width: {{ (report_summary.total_actual_hours / report_summary.total_hours * 100)|round(1) if report_summary.total_hours > 0 else 0 }}%"></div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">偏差工时</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ report_summary.total_deviation_hours }}h</td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="w-full bg-gray-200 rounded-full h-2.5">
                                    <div class="bg-red-600 h-2.5 rounded-full" style="width: {{ (report_summary.total_deviation_hours / report_summary.total_hours * 100)|round(1) if report_summary.total_hours > 0 else 0 }}%"></div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            {% endif %}
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
{{ super() }}
<script src="{{ url_for('static', filename='js/echarts.min.js') }}"></script>
<script>
    // 初始化项目工时分布饼图
    function initProjectHoursChart() {
        const chart = echarts.init(document.getElementById('project-hours-chart'));
        const option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c}h ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '项目工时',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        {value: 320, name: '项目A'},
                        {value: 240, name: '项目B'},
                        {value: 180, name: '项目C'},
                        {value: 160, name: '项目D'},
                        {value: 120, name: '项目E'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        chart.setOption(option);
        window.addEventListener('resize', () => chart.resize());
    }

    // 初始化人员工时排行柱状图
    function initUserHoursChart() {
        const chart = echarts.init(document.getElementById('user-hours-chart'));
        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九'],
                axisLabel: {
                    interval: 0,
                    rotate: 30
                }
            },
            yAxis: {
                type: 'value',
                name: '工时(小时)'
            },
            series: [
                {
                    name: '工时',
                    type: 'bar',
                    data: [120, 100, 90, 85, 80, 75, 70],
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {offset: 0, color: '#83bff6'},
                            {offset: 0.5, color: '#188df0'},
                            {offset: 1, color: '#188df0'}
                        ])
                    }
                }
            ]
        };
        chart.setOption(option);
        window.addEventListener('resize', () => chart.resize());
    }

    // 初始化月度工时趋势折线图
    function initMonthlyTrendChart() {
        const chart = echarts.init(document.getElementById('monthly-trend-chart'));
        const option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['计划工时', '实际工时']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            yAxis: {
                type: 'value',
                name: '工时(小时)'
            },
            series: [
                {
                    name: '计划工时',
                    type: 'line',
                    stack: 'Total',
                    data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330],
                    itemStyle: {
                        color: '#10B981'
                    }
                },
                {
                    name: '实际工时',
                    type: 'line',
                    stack: 'Total',
                    data: [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149],
                    itemStyle: {
                        color: '#F59E0B'
                    }
                }
            ]
        };
        chart.setOption(option);
        window.addEventListener('resize', () => chart.resize());
    }

    // 初始化任务状态工时分布
    function initTaskStatusChart() {
        const chart = echarts.init(document.getElementById('task-status-chart'));
        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['待开始', '进行中', '已完成', '已暂停']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['项目A', '项目B', '项目C', '项目D', '项目E']
            },
            yAxis: {
                type: 'value',
                name: '工时(小时)'
            },
            series: [
                {
                    name: '待开始',
                    type: 'bar',
                    stack: '总量',
                    data: [32, 30, 30, 33, 39],
                    itemStyle: { color: '#6B7280' }
                },
                {
                    name: '进行中',
                    type: 'bar',
                    stack: '总量',
                    data: [12, 13, 10, 13, 9],
                    itemStyle: { color: '#3B82F6' }
                },
                {
                    name: '已完成',
                    type: 'bar',
                    stack: '总量',
                    data: [30, 34, 35, 34, 38],
                    itemStyle: { color: '#10B981' }
                },
                {
                    name: '已暂停',
                    type: 'bar',
                    stack: '总量',
                    data: [22, 18, 19, 23, 21],
                    itemStyle: { color: '#EF4444' }
                }
            ]
        };
        chart.setOption(option);
        window.addEventListener('resize', () => chart.resize());
    }

    // 初始化项目工时详情表格图
    function initProjectDetailsChart() {
        const chart = echarts.init(document.getElementById('project-details-chart'));
        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['计划工时', '实际工时', '偏差率']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['项目A', '项目B', '项目C', '项目D', '项目E', '项目F', '项目G', '项目H'],
                axisLabel: {
                    interval: 0,
                    rotate: 30
                }
            },
            yAxis: [
                {
                    type: 'value',
                    name: '工时(小时)',
                    position: 'left'
                },
                {
                    type: 'value',
                    name: '偏差率(%)',
                    position: 'right',
                    axisLabel: {
                        formatter: '{value}%'
                    }
                }
            ],
            series: [
                {
                    name: '计划工时',
                    type: 'bar',
                    data: [320, 302, 301, 334, 390, 330, 320, 280],
                    itemStyle: { color: '#10B981' }
                },
                {
                    name: '实际工时',
                    type: 'bar',
                    data: [120, 132, 101, 134, 90, 230, 210, 182],
                    itemStyle: { color: '#F59E0B' }
                },
                {
                    name: '偏差率',
                    type: 'line',
                    yAxisIndex: 1,
                    data: [20, 22, 33, 45, 63, 10, 20, 35],
                    itemStyle: { color: '#EF4444' }
                }
            ]
        };
        chart.setOption(option);
        window.addEventListener('resize', () => chart.resize());
    }

    // 从API获取图表数据并初始化图表
    async function loadChartData() {
        try {
            const response = await fetch('/api/work/hour/dashboard/charts');
            const result = await response.json();
            
            if (result.success && result.data) {
                const data = result.data;
                
                // 初始化所有图表
                initProjectHoursChart(data.project_hours);
                initUserHoursChart(data.user_hours);
                initMonthlyTrendChart(data.monthly_trend);
                initTaskStatusChart(data.status_distribution);
                initProjectDetailsChart(data.project_details);
            } else {
                console.error('获取图表数据失败:', result.message);
                // 使用空数据初始化图表
                initProjectHoursChart([]);
                initUserHoursChart([]);
                initMonthlyTrendChart([]);
                initTaskStatusChart([]);
                initProjectDetailsChart([]);
            }
        } catch (error) {
            console.error('加载图表数据失败:', error);
            // 使用空数据初始化图表
            initProjectHoursChart([]);
            initUserHoursChart([]);
            initMonthlyTrendChart([]);
            initTaskStatusChart([]);
            initProjectDetailsChart([]);
        }
    }

    // 页面加载完成后获取数据并初始化图表
    document.addEventListener('DOMContentLoaded', function() {
        loadChartData();
    });
</script>
{% endblock %}